<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>伸缩容器_侧轴对齐方式_多行</title>
    <style>
        body{
            display: flex;
        }
        .outer{
            width: 1000px;
            height: 1000px;
            background-color: gray;
            /*开启弹性盒子*/
            display:flex;
            /*主轴方向*/
            flex-direction: row;
            /*主轴换行方式*/
            flex-wrap: wrap;
            /*主轴对齐方式*/
            justify-content: flex-start;
           /*侧轴单行对齐*/
            align-items: baseline;
            /*侧轴多行对齐(分配纵轴上的位置)
            align-content:
            flex-start:起始位置对齐,每一行都紧贴(找到一行最高的项目)
            flex-end:侧轴结束位置对齐,每一行都紧贴(找到一行最高的项目)
            center:侧轴中间位置对齐,上下预留的空白高度是一样的
            space-around:每行之间都有距离且相等,并且是上下行距离边距的二倍
            space-between:每行之间都有距离且相等,且上下行距离边缘没有距离
            space-evenly:均匀分布在同一行,上下行距离和每一行距离的值都相同
            stretch:默认值,拉伸至相同的高度.充满整个伸缩盒子,但是不能给项目的高度,否则无法拉伸
            */
            align-content: space-evenly;
        }
        .inner{
            width: 200px;
            height: 200px;
            border: 1px solid black;
            box-sizing: border-box;
            background-color: skyblue;
        }
        .inner1{
            height: 300px;
        }
        .inner2{
            height: 200px;
        }
        .inner3{
            height: 100px;
        }
    </style>
</head>
<body>
<div class="outer">
    <div class="inner inner1">1</div>
    <div class="inner inner2">2</div>
    <div class="inner inner3">3</div>
    <div class="inner inner2">6</div>
    <div class="inner inner3">7</div>
    <div class="inner inner2">8</div>
    <div class="inner inner2">9</div>
    <div class="inner inner2">10</div>
    <div class="inner inner2">11</div>
    <div class="inner inner2">12</div>
    <div class="inner inner2">13</div>
</div>
</body>
</html>